<template>
    <h3 style="color: red;">Teleport 传送门的使用</h3>

    <!--
        1. teleport 是一个组件,组件是一个像其他位置传递内容的组件.
        2. 该组件需要一个 to 属性来指定目标元素, 表示将 其子代内容,移动到某个(这里指定的body) 元素中
     -->
    <Teleport to="body">我是teleport 传送门,我把我自己放到了 body下了</Teleport>

    <Teleport to="#app">
        <div>我是teleport 传送门,我把我自己放到了 #app 的div下了,可以在我身上放属性哦</div>
    </Teleport>

    <!-------------------- 在同一个目标上放置多个 teleport --------------------- -->
    <h3 style="color: red;">在同一个目标上,使用多个 teleport 它会按照顺序放置</h3>
    <Teleport to="#app">
        <div>A</div>
    </Teleport>
    <Teleport to="#app">
        <div>B</div>
    </Teleport>
</template>

<script>
  import {Teleport} from 'vue'

  export default {
    name: "07.TelePort的使用"
  }
</script>

<style scoped>

</style>
